<template>
  <div class="container">
    <div class="p_rel" style="height: 100%; width: 100%">
      <div class="number_num_box">
        <div>
          <div>总购买用户数</div>
          <div>{{ user_num?.totalNum }}</div>
        </div>
        <div>
          <div>剩余可绑用户数</div>
          <div>{{ user_num?.restNum }}</div>
        </div>
      </div>
      <el-divider style="border-color: #f0f0f0"></el-divider>
      <search
        :form_data="header_list"
        @changeIsShow="
          (e) => {
            header_list[e].isShow = !header_list[e].isShow
          }
        "
        @search="search_key"
        @reset="
          header_list.forEach((item) => {
            item.value = ''
          }),
            search_key()
        "
        style="width: 100%"
      ></search>
      <el-table
        :data="list"
        class="tc"
        border
        :max-height="max_height"
        ref="table"
      >
        <el-table-column type="selection" width="55"></el-table-column>
        <el-table-column
          sortable
          label="绑定手机号"
          prop="bindPhone"
        ></el-table-column>
        <el-table-column
          sortable
          label="绑定用户名"
          prop="bindMember"
        ></el-table-column>
        <el-table-column sortable label="授权码有效期" prop="expireTime">
          <template #default="scope: any">
            <div v-if="scope.row.expireTime ?? '' !== ''">
              {{ formatDate(parseInt(scope.row.expireTime), 'yyyy-MM-dd') }}
            </div>
            <div v-else>--</div>
          </template>
        </el-table-column>
        <el-table-column
          sortable
          label="秘钥ID"
          prop="id"
          width="200px"
        ></el-table-column>
        <el-table-column sortable label="状态" prop="status">
          <template #default="scope: any">
            <div v-if="scope.row.status == 1">未绑定</div>
            <div v-if="scope.row.status == 2">绑定未激活</div>
            <div v-if="scope.row.status == 3">绑定已激活</div>
            <div v-if="scope.row.status == 4">已过期</div>
          </template>
        </el-table-column>
        <el-table-column sortable label="MAC" prop="mac"></el-table-column>
        <el-table-column label="操作">
          <template #default="scope: any">
            <el-button
              v-if="scope.row.phone == '' && has_role_list[0].has_role"
              @click="bind_cdk(scope)"
              type="primary"
              >绑定</el-button
            >
            <el-button
              v-if="scope.row.phone != '' && has_role_list[1].has_role"
              @click="unbind_cdk(scope)"
              >解绑</el-button
            >
            <el-button
              v-if="has_role_list[2].has_role"
              @click="delay_cdk(scope)"
              >延期</el-button
            >
          </template>
        </el-table-column>
      </el-table>
      <div class="bottom_btn">
        <el-button
          type="primary"
          @click="getSelection(1)"
          v-if="has_role_list[3].has_role"
          >加购用户</el-button
        >
        <el-button
          type="primary"
          @click="getSelection(2)"
          v-if="has_role_list[1].has_role"
          >批量解绑</el-button
        >
        <el-button
          type="primary"
          @click="getSelection(3)"
          v-if="has_role_list[0].has_role"
          >批量绑定</el-button
        >
        <el-button
          type="primary"
          @click="getSelection(4)"
          v-if="has_role_list[2].has_role"
          >批量延期</el-button
        >
      </div>
    </div>
    <el-drawer
      v-model="show_box"
      direction="rtl"
      size="60%"
      :close-on-click-modal="false"
      destroy-on-close
      @close=";(pay_amount = ''), (buy_form_data.monthNum = '')"
    >
      <template #title>
        <h4 v-if="box_type == 1">加购用户</h4>
        <h4 v-if="box_type == 2">批量解绑</h4>
        <h4 v-if="box_type == 3">批量绑定</h4>
        <h4 v-if="box_type == 4 && buy_form_data.buyNum > '1'">批量延期</h4>
        <h4 v-if="box_type == 4 && buy_form_data.buyNum == '1'">延期</h4>
        <h4 v-if="box_type == 5">绑定用户</h4>
      </template>
      <template #default>
        <div v-if="box_type == 1">
          <el-form label-width="150px">
            <el-form-item label="购买数量">
              <el-input
                placeholder="请输入"
                v-model="buy_form_data.buyNum"
                @input="get_pay_amount"
                type="number"
              ></el-input>
            </el-form-item>
            <el-form-item label="购买期限">
              <el-select
                v-model="buy_form_data.monthNum"
                @change="get_pay_amount"
              >
                <el-option
                  v-for="item in month_list"
                  :key="item.id"
                  :value="item.monthNum"
                  :label="item.monthNum + '个月'"
                ></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="付款金额">
              <el-input
                placeholder="请输入"
                disabled
                v-model="pay_amount"
              ></el-input>
            </el-form-item>
          </el-form>
          <div>购买价格</div>
          <el-table :data="cdk_price_list" class="m_top10" max-height="400px">
            <el-table-column label="起始量" prop="beginNum"></el-table-column>
            <el-table-column label="终止量" prop="endNum"></el-table-column>

            <el-table-column label="每用户/(n)月价格">
              <el-table-column
                v-for="(item, index) in month_list"
                :key="item.id"
                :label="item.monthNum + '个月'"
              >
                <template #default="scope: any">
                  {{ scope.row.plugPriceItemDetails[index].price }}
                </template>
              </el-table-column>
            </el-table-column>
          </el-table>
        </div>
        <div v-if="[2, 3, 5].includes(box_type)">
          <h4>绑定信息</h4>
          <el-table
            :data="select_cdk_list"
            border
            class="tc m_top10"
            max-height="400px"
          >
            <el-table-column label="绑定手机号" width="400px">
              <template #default="scope: any">
                <el-select
                  v-model="scope.row.assignId"
                  filterable
                  @change="
                    (val) => {
                      get_bind_mamber(val, scope.$index)
                    }
                  "
                  clearable
                  @clear="scope.row.name = ''"
                >
                  <el-option
                    v-for="item in user_list"
                    :key="item.memberId"
                    :label="item.phone + '/' + item.name"
                    :value="item.memberId"
                  ></el-option>
                </el-select>
              </template>
            </el-table-column>
            <el-table-column label="用户名" prop="name"></el-table-column>
            <el-table-column label="有效期"
              ><template #default="scope: any">
                <div v-if="scope.row.expireTime ?? '' !== ''">
                  {{ formatDate(parseInt(scope.row.expireTime), 'yyyy-MM-dd') }}
                </div>
                <div v-else>--</div>
              </template></el-table-column
            >
            <el-table-column label="秘钥ID" prop="id"></el-table-column>
          </el-table>
        </div>
        <div v-if="box_type == 4">
          <el-form label-width="150px">
            <el-form-item label="延期数量">
              <el-input
                placeholder="请输入"
                v-model="buy_form_data.buyNum"
                @input="get_pay_amount"
                type="number"
                disabled
              ></el-input>
            </el-form-item>
            <el-form-item label="延期期限">
              <div class="flex">
                <el-select
                  v-model="buy_form_data.monthNum"
                  @change="get_pay_amount"
                >
                  <el-option
                    v-for="item in month_list"
                    :key="item.id"
                    :value="item.monthNum"
                    :label="item.monthNum + '个月'"
                  ></el-option>
                </el-select>
                <el-button
                  type="primary"
                  class="m_left10"
                  @click="show_price_list = true"
                  >价格对照</el-button
                >
              </div>
              <el-table
                :data="cdk_price_list"
                v-if="show_price_list"
                class="m_top10"
              >
                <el-table-column
                  label="起始量"
                  prop="beginNum"
                ></el-table-column>
                <el-table-column label="终止量" prop="endNum"></el-table-column>

                <el-table-column label="每用户/(n)月价格">
                  <el-table-column
                    v-for="(item, index) in month_list"
                    :key="item.id"
                    :label="item.monthNum + '个月'"
                  >
                    <template #default="scope: any">
                      {{ scope.row.plugPriceItemDetails[index].price }}
                    </template>
                  </el-table-column>
                </el-table-column>
              </el-table>
            </el-form-item>
            <el-form-item label="付款金额">
              <el-input
                placeholder="请输入"
                disabled
                v-model="pay_amount"
              ></el-input>
            </el-form-item>
          </el-form>
          <div>延期秘钥列表</div>
          <el-table
            :data="select_cdk_list"
            border
            class="tc m_top10"
            max-height="400px"
          >
            <el-table-column label="秘钥ID" prop="id"></el-table-column>
            <el-table-column label="秘钥有效期">
              <template #default="scope: any">
                <div v-if="scope.row.expireTime ?? '' !== ''">
                  {{ formatDate(parseInt(scope.row.expireTime), 'yyyy-MM-dd') }}
                </div>
                <div v-else>--</div>
              </template>
            </el-table-column>
            <el-table-column label="绑定手机号" prop="phone"></el-table-column>
            <el-table-column label="用户名" prop="name"></el-table-column>
          </el-table>
        </div>
        <div class="tr m_top10">
          <el-button
            @click="
              ;(show_box = false),
                (select_cdk_list = []),
                (pay_amount = ''),
                (buy_form_data.monthNum = '')
            "
            >取消</el-button
          >
          <el-button type="primary" @click="submit" :loading="btn_loading"
            >确定</el-button
          >
        </div>
      </template>
    </el-drawer>
    <el-dialog
      v-model="unBind_box"
      width="30%"
      :close-on-click-modal="false"
      destroy-on-close
      :title="unBind_idList.length == 1 ? '解绑' : '批量解绑'"
    >
      <div class="p_0_20">
        <h4>解绑类型</h4>
        <div>
          <el-radio v-model="unBind_type" :label="1">解绑MAC地址</el-radio>
          <el-radio v-model="unBind_type" :label="2">解绑用户</el-radio>
        </div>
      </div>
      <el-divider style="margin-top: 10px"></el-divider>
      <div class="tr m_20">
        <el-button @click="unBind_box = false">取消</el-button>
        <el-button type="primary" @click="unBind_submit">确定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script lang="ts" setup>
import { check_role, formatDate, handle_search_key } from '@/utils/check_role'
import { ref, onMounted } from 'vue'
import search from '@/view/components/search.vue'
import axios from '@/service/HttpRequest'
import serviceApi from '@/service/api'
import { ElMessage, ElMessageBox } from 'element-plus'
import { useStore } from 'vuex'
import { useRouter } from 'vue-router'
import { getCookie } from '@/utils/cookie'
import EventBus from '@/utils/EventBus'
const router = useRouter()
const has_role_list = ref([
  { path: '/bindCdk', has_role: false },
  { path: '/unBindCdk', has_role: false },
  { path: '/delayCdk', has_role: false },
  { path: '/buyCdk', has_role: false },
])
const store = useStore()
const show_box = ref(false)
const box_type = ref(1)
const loading = ref(false)
const list = ref([])
const page_data = ref({
  bindMember: '',
  bindPhone: '',
  expireTime: '',
  id: '',
  mac: '',
  status: '',
  enterpriseId:
    store.state.enterprise_id != '' // 当前登录企业 vuex > cookie
      ? store.state.enterprise_id
      : getCookie('enterprise_id'),
})
const user_list = ref()
const select_cdk_list = ref([])
const header_list = ref([
  {
    label: '绑定手机号',
    value: '',
    showTable: true,
    type: 'input',
    isShow: true,
    options: [],
  },
  {
    label: '绑定用户名',
    value: '',
    showTable: true,
    type: 'input',
    isShow: true,
    options: [],
  },
  {
    label: '授权码有效期',
    value: '',
    showTable: true,
    type: 'date',
    isShow: false,
    options: [],
  },
  {
    label: '秘钥ID',
    value: '',
    showTable: true,
    type: 'input',
    isShow: false,
    options: [],
  },
  {
    label: '状态',
    value: '',
    showTable: true,
    type: 'select',
    isShow: false,
    options: [
      {
        value: 1,
        label: '未绑定',
      },
      {
        value: 2,
        label: '绑定未激活',
      },
      {
        value: 3,
        label: '绑定已激活',
      },
      {
        value: 4,
        label: '已过期',
      },
    ],
  },
  {
    label: 'MAC',
    value: '',
    showTable: true,
    type: 'input',
    isShow: false,
    options: [],
  },
])
const max_height = ref()
onMounted(() => {
  max_height.value = window.innerHeight - 530
  setTimeout(() => {
    has_role_list.value.forEach((item) => {
      item.has_role = check_role(item)
    })
  }, 1000)
  get_list()
  get_user_list()
  get_price_list()
  EventBus.on('change_enterprise_id', () => {
    get_list()
    get_user_list()
    get_price_list()
  })
  EventBus.on('pay_succ', () => {
    get_list()
    get_cdk_user_num()
  })
})
const user_num = ref()
const get_cdk_user_num = () => {
  axios
    .request({ url: serviceApi.cdk_user_num, method: 'post' })
    .then((res) => {
      user_num.value = res.data
    })
}
const buy_form_data = ref({
  buyNum: '',
  monthNum: '',
})
const show_price_list = ref(false)
const pay_amount = ref()
const get_pay_amount = () => {
  buy_form_data.value.buyNum = buy_form_data.value.buyNum.replace(
    /^(0+)|[^\d]+/g,
    ''
  )
  let has_number = false
  cdk_price_list.value.forEach((item) => {
    if (
      item.beginNum <= buy_form_data.value.buyNum &&
      item.endNum >= buy_form_data.value.buyNum
    ) {
      has_number = true
      item.plugPriceItemDetails.forEach((item1) => {
        if (item1.monthNum == buy_form_data.value.monthNum) {
          pay_amount.value = parseInt(buy_form_data.value.buyNum) * item1.price
        }
      })
    }
  })
  if (!has_number) {
    pay_amount.value = ''
  }
  console.log(has_number)
}
const cdk_price_list = ref([])
const month_list = ref()
const get_price_list = () => {
  axios
    .request({ url: serviceApi.cdk_price_list, method: 'post' })
    .then((res) => {
      console.log(res)
      cdk_price_list.value = res.data?.plugPriceItems
      month_list.value = res.data?.plugPriceItems[0]?.plugPriceItemDetails
    })
}
const table = ref(null)
const unBind_box = ref(false) // 解绑弹窗
const unBind_type = ref(1) // 解绑类型
const unBind_idList = ref([])
const unBind_submit = () => {
  // 解绑 单个/多个 + 类型
  if (unBind_idList.value.length == 1) {
    axios
      .request({
        url:
          serviceApi.cdk_list_unbind +
          '/' +
          unBind_idList.value[0] +
          '/' +
          unBind_type.value,
        method: 'post',
      })
      .then((res) => {
        console.log(res)
        ElMessage.success('操作成功！')
        setTimeout(() => {
          unBind_box.value = false
          get_list()
          get_cdk_user_num()
        }, 1000)
      })
      .catch((err) => {
        ElMessage.error(err)
      })
  } else {
    axios
      .request({
        url: serviceApi.cdk_list_unBindCdkBatch,
        method: 'post',
        data: {
          idList: unBind_idList.value,
          type: unBind_type.value,
        },
      })
      .then((res) => {
        console.log(res)
        ElMessage.success('操作成功！')
        setTimeout(() => {
          unBind_box.value = false
          get_list()
          get_cdk_user_num()
        }, 1000)
      })
      .catch((err) => {
        ElMessage.error(err)
      })
  }
}
// 批量操作 1 加购、2 解绑、3 绑定、4 延期
const getSelection = (e) => {
  console.log(table.value.getSelectionRows())
  select_cdk_list.value = JSON.parse(
    JSON.stringify(table.value.getSelectionRows())
  ) // 获取选中的数据
  if ([2, 3, 4].includes(e) && !select_cdk_list.value.length) {
    ElMessage.warning('请勾选秘钥')
    return
  }
  if (e == 2) {
    // 批量解绑
    let flag = select_cdk_list.value.some((item) => {
      return item.name == ''
    })
    if (flag) {
      ElMessage.warning('已勾选的记录中存在未绑定用户的秘钥')
      return
    }
    unBind_idList.value = []
    select_cdk_list.value.forEach((item) => {
      unBind_idList.value.push(item.id)
    })
    unBind_type.value = 1
    unBind_box.value = true
  } else {
    let flag_1 = select_cdk_list.value.some((item) => {
      return item.name != ''
    })
    if (e == 3 && flag_1) {
      ElMessage.warning('已勾选的记录中存在已绑定用户的秘钥')
      return
    }
    buy_form_data.value.monthNum = ''
    buy_form_data.value.buyNum = e == 1 ? '' : select_cdk_list.value.length + ''
    box_type.value = e
    show_box.value = true
    get_user_list()
  }
}
const bind_cdk = (e) => {
  console.log(e)
  box_type.value = 5
  select_cdk_list.value = [JSON.parse(JSON.stringify(e.row))]
  show_box.value = true
}
const delay_cdk = (e) => {
  select_cdk_list.value = [e.row]
  buy_form_data.value.buyNum = 1 + ''
  box_type.value = 4
  show_box.value = true
}
const unbind_cdk = (e) => {
  unBind_idList.value = []
  unBind_idList.value.push(e.row.id)
  unBind_type.value = 1
  unBind_box.value = true
}
const get_bind_mamber = (e, index) => {
  console.log(e, index)
  user_list.value.some((item) => {
    if (e == item.memberId) {
      select_cdk_list.value[index].name = item.name
    }
    return item.memberId == e
  })
}
const btn_loading = ref(false)
const submit = () => {
  console.log(select_cdk_list.value, list.value)
  if (box_type.value == 5) {
    // 单个绑定
    if (btn_loading.value) return
    btn_loading.value = true
    let binded_name = ''
    let binded_id = ''
    select_cdk_list.value.forEach((item) => {
      list.value.forEach((item1) => {
        if (item.assignId == item1.assignId) {
          binded_name = item.name
          binded_id += (binded_id != '' ? ' / ' : '') + item1.id
        }
      })
    })
    if (binded_name != '') {
      ElMessageBox.confirm(
        '其中账号为 - ' +
          binded_name +
          ' - 已经绑定过秘钥，密钥ID为：' +
          binded_id +
          '，确定重复绑定吗？',
        '',
        {
          cancelButtonText: '取消',
          confirmButtonText: '确定',
          closeOnClickModal: false,
          type: 'warning',
        }
      )
        .then(() => {
          single_bind()
        })
        .catch(() => {
          btn_loading.value = false
        })
    } else {
      single_bind()
    }
  } else if (box_type.value == 3) {
    // 批量绑定
    if (btn_loading.value) return
    btn_loading.value = true
    let binded_name = []
    let binded_id = []
    list.value.forEach((item1) => {
      select_cdk_list.value.some((item) => {
        // console.log(item1)
        if (item.assignId && item.assignId == item1.assignId) {
          console.log(item1)
          binded_name.includes(item.name) ? '' : binded_name.push(item.name)

          binded_id.push(item1.id)
        }
        return item.assignId == item1.assignId
      })
    })
    console.log(binded_name, binded_id)
    if (binded_name.length) {
      ElMessageBox.confirm(
        '其中账号为 - ' +
          binded_name.toString() +
          ' - 已经绑定过秘钥，密钥ID为：' +
          binded_id.toString() +
          '，确定重复绑定吗？',
        '',
        {
          cancelButtonText: '取消',
          closeOnClickModal: false,
          confirmButtonText: '确定',
          type: 'warning',
        }
      )
        .then(() => {
          batch_bind()
        })
        .catch(() => {
          btn_loading.value = false
        })
    } else {
      batch_bind()
    }
  } else if (box_type.value == 1) {
    // 加购用户
    let has_buyNum = cdk_price_list.value.some((item) => {
      return (
        item.beginNum <= buy_form_data.value.buyNum &&
        item.endNum >= buy_form_data.value.buyNum
      )
    })
    if (!has_buyNum) {
      ElMessage.error('请输入合适的购买数量！')
      return
    }
    if (pay_amount.value > 0) {
      getBalance_info(2)
    } else {
      ElMessage.error('请完善购买信息')
    }
  } else if (box_type.value == 4) {
    // 延期用户
    if (pay_amount.value > 0) {
      getBalance_info(3)
    } else {
      ElMessage.error('请完善延期信息')
    }
  }
}
const single_bind = () => {
  axios
    .request({
      url: serviceApi.cdk_list_assign,
      method: 'post',
      data: {
        assignId: select_cdk_list.value[0].assignId,
        id: select_cdk_list.value[0].id,
      },
    })
    .then((res) => {
      console.log(res)
      ElMessage.success('操作成功！')
      setTimeout(() => {
        get_list()
        btn_loading.value = false
        show_box.value = false
      }, 1000)
    })
    .catch((err) => {
      ElMessage.error(err)
      btn_loading.value = false
    })
}
const batch_bind = () => {
  let assignList = []
  select_cdk_list.value.forEach((item) => {
    let obj = Object.assign({}, { assignId: item.assignId, id: item.id })
    assignList.push(obj)
  })
  axios
    .request({
      url: serviceApi.cdk_list_assignCdkBatch,
      method: 'post',
      data: { assignList: assignList },
    })
    .then(() => {
      ElMessage.success('操作成功！')
      setTimeout(() => {
        get_list()
        get_cdk_user_num()
        btn_loading.value = false
        show_box.value = false
      }, 1000)
    })
    .catch((err) => {
      ElMessage.error(err)
      btn_loading.value = false
    })
}
const submit_order = (e) => {
  axios
    .request({
      url: serviceApi.submit_itemOrder,
      method: 'post',
      data: {
        id: e.data,
        itemList: [
          {
            payWay: 1,
            totalFee: pay_amount.value,
          },
        ],
      },
    })
    .then((res) => {
      pay_order(e)
    })
    .catch((err) => {
      ElMessage.error(err)
    })
}
const pay_order = (e) => {
  axios
    .request({
      url: serviceApi.pay_itemOrder,
      method: 'post',
      data: { payOrderId: e.data },
    })
    .then(() => {
      ElMessage.success('购买成功！')
      show_box.value = false
      setTimeout(() => {
        getBalance_info(1)
        get_list()
        get_cdk_user_num()
      }, 2000)
    })
    .catch((err) => {
      ElMessage.error(err)
    })
}
const getBalance_info = (e) => {
  axios
    .request({ url: serviceApi.getBalance_info, method: 'get' })
    .then((res) => {
      store.commit('set_balance_info', res.data)
      if (e == 2) {
        ElMessageBox.confirm(
          '当前可用余额为：' +
            res.data.totalAmount +
            '，本次需支付：' +
            pay_amount.value,
          '',
          {
            cancelButtonText: '取消',
            closeOnClickModal: false,
            confirmButtonText:
              res.data.totalAmount >= pay_amount.value ? '确定' : '去充值',
            type: 'warning',
          }
        )
          .then(() => {
            if (res.data.totalAmount < pay_amount.value) {
              router.push('recharge')
            } else {
              // 创建订单
              axios
                .request({
                  url: serviceApi.create_cdk_order,
                  method: 'post',
                  data: buy_form_data.value,
                })
                .then((res) => {
                  console.log(res)
                  submit_order(res)
                })
                .catch((err) => {
                  ElMessage.error(err)
                })
            }
          })
          .catch(() => {})
      } else if (e == 3) {
        let cdkIdList = []
        select_cdk_list.value.forEach((item) => {
          cdkIdList.push(item.id)
        })
        let data = Object.assign(buy_form_data.value, { cdkIdList: cdkIdList })
        ElMessageBox.confirm(
          '当前可用余额为：' +
            res.data.totalAmount +
            '，本次需支付：' +
            pay_amount.value,
          '',
          {
            cancelButtonText: '取消',
            closeOnClickModal: false,
            confirmButtonText:
              res.data.totalAmount >= pay_amount.value ? '确定' : '去充值',
            type: 'warning',
          }
        )
          .then(() => {
            if (res.data.totalAmount < pay_amount.value) {
              router.push('recharge')
            } else {
              // 创建订单
              axios
                .request({
                  url: serviceApi.deley_cdk_order,
                  method: 'post',
                  data: data,
                })
                .then((res) => {
                  console.log(res)
                  submit_order(res)
                })
                .catch((err) => {
                  ElMessage.error(err)
                })
            }
          })
          .catch(() => {})
      }
    })
    .catch((error) => {
      ElMessage.error(error)
    })
}
const get_list = () => {
  loading.value = true
  axios
    .request({
      url: serviceApi.cdk_list,
      method: 'post',
      data: handle_search_key(page_data.value),
    })
    .then((res) => {
      console.log(res)
      if (res.data === null) {
        list.value = []
        loading.value = false
        return
      }
      res.data.forEach((item) => {
        item.phone = item.bindPhone
        item.name = item.bindMember
      })
      list.value = res.data
      get_cdk_user_num()
      loading.value = false
    })
    .catch((err) => {
      loading.value = false
      ElMessage.error(err)
    })
}
const search_key = () => {
  console.log(header_list.value)
  page_data.value = {
    bindPhone: header_list.value[0].value,
    bindMember: header_list.value[1].value,
    expireTime: header_list.value[2].value,
    id: header_list.value[3].value,
    mac: header_list.value[5].value,
    status: header_list.value[4].value as any,
    enterpriseId: page_data.value.enterpriseId,
  }
  console.log(page_data.value)
  get_list()
}
const get_user_list = () => {
  let data = {
    current: 1,
    pageSize: 10000,
    status: 2,
    enterpriseId:
      store.state.enterprise_id != '' // 当前登录企业 vuex > cookie
        ? store.state.enterprise_id
        : getCookie('enterprise_id'),
    deptName: '',
    name: '',
    nickName: '',
    wechat: '',
    phone: '',
    roleName: '',
    remark: '',
  }
  axios
    .request({
      url: serviceApi.user_list,
      method: 'post',
      data: handle_search_key(data),
    })
    .then((res) => {
      console.log(res)
      user_list.value = res.data.content
    })
    .catch((err) => {
      ElMessage.error(err)
    })
}
</script>

<style lang="scss" scoped>
.number_num_box {
  display: flex;
  align-items: center;
  color: #fff;
  margin-bottom: 20px;
  column-gap: 30px;
  > div {
    width: 120px;
    height: 54px;
    padding: 16px 24px;
    border-radius: 2px;
    > div:last-child {
      font-size: 24px;
      font-weight: bold;
      margin-top: 5px;
    }
  }
  > div:first-child {
    background-image: url(@/assets/img/function_bg_1.png);
    background-size: 100% 100%;
  }
  > div:last-child {
    background-image: url(@/assets/img/function_bg_2.png);
    background-size: 100% 100%;
  }
}
.bottom_btn {
  position: absolute;
  bottom: 0;
  right: 20px;
  display: flex;
  align-items: center;
  column-gap: 20px;
}
</style>
